<script>
import roleManger from "@/api/roleManger";
export default {
  data(){
    return{
      name:"",
      tableData:[],
      form:{},
      dialogFormVisible:false,
      formLabelWidth:"100px",
      title:"",
      ids:[],
      dialogMenuVisible:false,
      menusData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      roleId:"",
      menusForm:{}
    }
  },
  methods:{
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    },
    //获取所有数据
    getTableData(){
      roleManger.getAllRoleApi(this.name).then(res=>{
        this.tableData=res.data
      })
    },
    //重置
    reset(){
      this.name=""
      this.getTableData()
    },
    //新增/编辑对话框
    updateOradd(row){
      if(row==null){//新增
        this.title="新增角色"
      }else{//编辑
        this.title="角色编辑"
        this.form=row
      }
      //弹出对话框
      this.dialogFormVisible=true
    },
    //清空表单
    clearForm(){
      this.form={}//清空表单
      //清空表单验证结果
      this.$refs.ruleForm.clearValidate()
    },
    //编辑/新增对话框确定
    updateAndSave(){
      this.$refs.ruleForm.validate((valid)=>{
        if(valid){//校验成功
          roleManger.updateAndSaveApi(this.form).then(res=>{
            if(res.code==200){
              this.$message.success(res.message)
              this.getTableData()
              //关闭对话框
              this.dialogFormVisible=false
            }else{
              this.$message.error(res.message)
            }
          })
        }else{
          this.$message.error("请仔细填写内容")
          return false
        }
      })
    },
    //删除
    delData(row){
      this.$confirm(`此操作将永久删除${row.roleName}角色, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //删除业务
        roleManger.delDataApi(row.roleId).then(res=>{
          this.$message.success(res.message)
          this.getTableData()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //多选框选择
    handleSelectionChange(row){
      //获取每个对象中的id
      //使用vue提供的map()进行遍历
      this.ids= row.map(v=>v.roleId)
    },
    //批量删除
    delDataByIds(){
      this.$confirm(`此操作将永久删除, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //批量删除业务
        roleManger.delDataByIdsApi(this.ids).then(res=>{
          this.$message.success(res.message)
          this.getTableData()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    //菜单权限对话框
    menuShow(roleId){
      this.roleId=roleId
      this.dialogMenuVisible=true
    },
    //清空菜单信息
    clearMenu(){

    },
    //获取所有菜单
    getMenus(){
        roleManger.getMenusApi().then(res=>{
          this.menusData=res.data
        })
    },
    //添加角色菜单数据
    saveRoleMenu(){
      this.menusForm.roleId=this.roleId
      //获取选中的节点的父节点id
     let parentId= this.$refs.tree.getHalfCheckedKeys();
      //获取当前选中的节点
      let subId=this.$refs.tree.getCheckedKeys();
      //将父节点id和子节点id合并
      let menuIds=parentId.concat(subId)
      this.menusForm.menuIds=menuIds
      roleManger.saveRoleMenuApi(this.menusForm).then(res=>{
        this.$message.success(res.message)
        //关闭对话框
        this.dialogMenuVisible=false
      })
    }

  },
  //先执行该方法然后在渲染页面
  created() {
    this.getTableData()
    this.getMenus()
  }
}
</script>

<template>
  <div>
    <!--搜索区-->
    <el-card>
      <el-row style="margin-bottom: 20px">
        <el-input style="width: 200px;margin-right: 15px"  v-model="name" placeholder="请输入角色名称" suffix-icon="el-icon-user-solid"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="getTableData">查询</el-button>
        <el-button type="warning" icon="el-icon-refresh" @click="reset">重置</el-button>
      </el-row>
      <el-row>
        <el-button type="primary" icon="el-icon-plus" @click="updateOradd(null)">新增</el-button>
        <el-button type="danger" icon="el-icon-delete-solid"  @click="delDataByIds" >批量删除</el-button>
      </el-row>
    </el-card>

    <!-- 结果列表-->
    <el-card>
      <el-table border  @selection-change="handleSelectionChange" :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
        <el-table-column type="selection"   width="55">
        </el-table-column>
        <el-table-column prop="roleId" label="ID"  width="60">
        </el-table-column>
        <el-table-column prop="roleName" label="名称"  width="100">
        </el-table-column>
        <el-table-column prop="roleDesc" label="描述"  width="180">
        </el-table-column>
        <el-table-column prop="unkey" label="唯一标识"  width="150">
        </el-table-column>
        <el-table-column  label="操作">
          <template v-slot="s">
            <el-button type="info" icon="el-icon-menu" @click="menuShow(s.row.roleId)">菜单权限</el-button>
            <el-button type="warning" icon="el-icon-edit" @click="updateOradd(s.row)">编辑</el-button>
            <el-button type="danger" icon="el-icon-delete" @click="delData(s.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!--编辑/新增对话框-->
    <el-dialog :title="title" :visible.sync="dialogFormVisible"  @close="clearForm">
      <el-form :model="form"  ref="ruleForm" >
        <el-form-item label="角色名称" prop="roleName" :label-width="formLabelWidth">
          <el-input v-model="form.roleName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="roleDesc"  :label-width="formLabelWidth">
          <el-input v-model="form.roleDesc"    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="唯一标识" prop="unkey"   :label-width="formLabelWidth">
          <el-input v-model="form.unkey" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateAndSave">确 定</el-button>
      </div>
    </el-dialog>

    <!--菜单权限对话框-->
    <el-dialog title="菜单信息" :visible.sync="dialogMenuVisible"  @close="clearMenu">
      <el-tree
        :data="menusData"
        show-checkbox
        node-key="id"
        default-expand-all
        ref="tree"
        :props="defaultProps">
      </el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveRoleMenu">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>

